<%--
首页
--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="service.GoodsService" %>
<%@ page import="model.Goods" %>
<%@ page import="java.util.List" %>
<%
    //    获取商品id
    GoodsService goodsService = new GoodsService();
    List<Goods> goodsList = goodsService.getGoodsList();
    request.setAttribute("goodsList", goodsList);
%>


<html>
<head>
    <title>小米官网</title>
    <link href="css/index.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<jsp:include page="navigation.jsp"/>
<div id="body">

    <div id="body-1">
        <div class="c" id="navigation">
            <img id="mi-icon" src="image/mi-icon.png">

            <button id="b-search"></button>
            <input type="text" id="inputfile">

            <div id="nav">
                <a class="nav-a">社区</a>
                <a class="nav-a">服务</a>
                <a class="nav-a">智能硬件</a>
                <a class="nav-a">路由器</a>
                <a class="nav-a">家电</a>
                <a class="nav-a">平板</a>
                <a class="nav-a">笔记本</a>
                <a class="nav-a">电视</a>
                <a class="nav-a">Redmi红米</a>
                <a class="nav-a" id="Xiaomi手机">Xiaomi手机</a>
            </div>
        </div>
        <div class="c" id="c-img1">

            <div id="button-prev" class="b"></div>
            <div id="button-next" class="b"></div>

            <div id="circles">
                <div id="a-00" class="circle"></div>
                <div id="a-01" class="circle"></div>
                <div id="a-02" class="circle"></div>
                <div id="a-03" class="circle"></div>
                <div id="a-04" class="circle"></div>
            </div>
        </div>

        <div id="shouji">
            <%--                渲染--%>
            <div>
                <p>Note 11 Pro 系列</p>
                <img src="./image/index/shouji/0.jpg">
            </div>
        </div>
    </div>

    <div class="c" id="qw">
        <div id="qqq">
            <div>
                <a id="a-1" href="#" class="ii">
                    <img id="a-1-i" class="i" src="./image/index/i-1-灰.png">
                    保障服务
                </a>
            </div>
            <div>
                <a id="a-2" href="#" class="ii">
                    <img id="a-2-i" class="i" src="./image/index/i-2-灰.png">
                    企业团购
                </a>
            </div>
            <div>
                <a id="a-3" href="#" class="ii">
                    <img id="a-3-i" class="i" src="./image/index/i-3-灰.png">
                    F码通道
                </a>
            </div>
            <a id="a-4" href="#" class="ii">
                <img id="a-4-i" class="i" src="./image/index/i-4-灰.png">
                米粉卡
            </a>
            <div>
                <a id="a-5" href="#" class="ii">
                    <img id="a-5-i" class="i" src="./image/index/i-5-灰.png">
                    以旧换新
                </a>
            </div>
            <div>
                <a id="a-6" href="#" class="ii">
                    <img id="a-6-i" class="i" src="./image/index/i-6-灰.png">
                    话费充值
                </a>
            </div>
        </div>
        <div>
            <img class="img" src="./image/index/7.jpg">
            <img class="img" src="./image/index/6.jpg">
            <img class="img" src="./image/index/5.jpg">
        </div>
    </div>
</div>
<div class="container">
    <a href="#" class="main-banner-box">
        <img src="image/index/7248c15e951749a3c1840059ef4a03a9.jpg">
    </a>
</div>
<div class="container">
    <h2 class="title" style=" text-align: center;">全部商品</h2>
</div>
<div class="main-page">
    <c:forEach items="${goodsList}" var="g">
        <ul class="right">
            <li class="right-item-up">
                <a href="goods_detail.jsp?id=${g.id}" class="sell-item">
                    <img src=".${g.cover}" alt="${g.name}" style="width: 160px;height: 160px;" alt=""/>
                    <h3 class="item-title"><a href="goods_detail.jsp?id=${g.id}">${g.name}</a></h3>
                    <p class="desc">${g.intro}</p>
                    <span class="num">￥${g.price}元起</span>
                </a>
            </li>
        </ul>
    </c:forEach>
</div>
</div>
</body>
<script src="js/index-1.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/layer.js"></script>
<script>
    // 定义图片路径数组
    var array = new Array(5);
    array[0] = "url('./image/index/change/0.jpg')";
    array[1] = "url('./image/index/change/1.jpg')";
    array[2] = "url('./image/index/change/2.jpg')";
    array[3] = "url('./image/index/change/3.jpg')";
    array[4] = "url('./image/index/change/4.jpg')";

    // 定义用于指示图片的元素的id数组
    var ray = ["a-00", "a-01", "a-02", "a-03", "a-04"];

    // 当前图片索引，初始化为0
    var i = 0;

    // 获取相关DOM元素
    var prevButton = id("button-prev");
    var nextButton = id("button-next");
    var e = id("c-img1");

    // 提前设置图片切换的过渡时间和过渡效果，这里设置过渡时间为1秒（1000毫秒），过渡效果为线性变化，你可以根据需求调整
    e.style.transition = "background 1s linear";

    // 为上一张按钮添加点击事件处理函数
    prevButton.onclick = function () {
        i--;
        change();
    };

    // 为下一张按钮添加点击事件处理函数
    nextButton.onclick = function () {
        i++;
        change();
    };

    // 自动切换图片的定时器，这里设置每隔3秒（3000毫秒）切换一次，你可以根据需求调整时间间隔
    var autoSwitchTimer = setInterval(function () {
        i++;
        change();
    }, 3000);

    function change() {
        // 确保索引在合法范围内（0到4循环）
        i = (i + 5) % 5;
        // 设置图片背景
        e.style.background = array[i];
        e.style.backgroundSize = "contain";

        // 右下角圆圈变换，将当前选中的圆圈设为白色，其他设为灰色
        for (var j = 0; j < ray.length; j++) {
            if (j === i) {
                id(ray[j]).style.background = "#FFF";
            } else {
                id(ray[j]).style.background = "#666";
            }
        }
    }

    // 简单的辅助函数，用于通过id获取DOM元素，你可以根据实际项目中使用的库等情况调整这个函数实现方式
    function id(elementId) {
        return document.getElementById(elementId);
    }
</script>
</html>